<template>
	<view class="zone">
		<Header title="至尊礼包码"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box1">
				<view class="item">
					<view class="p1">领奖流程</view>
					<view class="p2">复制礼包码-进入游戏-打开设置-礼包码兑换-输入礼包码</view>
				</view>
				<view class="item">
					<scroll-view scroll-y class="scrolllist">
						<view class="list">

							<view class="msgbox ng">
								<view class="user">
									<view class="p1">专属骷髅时装礼包</view>
									<view class="p2">价值:<text>888米</text></view>
								</view>
								<view class="num">
									svip666
								</view>
								<view class="scopy" @click="$p.copy('svip666')">
									复制
								</view>
							</view>

							<view class="msgbox">
								<view class="user">
									<view class="p1">等级生肖礼包</view>
									<view class="p2">价值:<text>88米</text></view>
								</view>
								<view class="num">
									vip000
								</view>
								<view class="scopy" @click="$p.copy('vip000')">
									复制
								</view>
							</view>

							<view class="msgbox">
								<view class="user">
									<view class="p1">等级生肖礼包</view>
									<view class="p2">价值:<text>88米</text></view>
								</view>
								<view class="num">
									vip111
								</view>
								<view class="scopy" @click="$p.copy('vip111')">
									复制
								</view>
							</view>
							<view class="msgbox">
								<view class="user">
									<view class="p1">等级生肖礼包</view>
									<view class="p2">价值:<text>88米</text></view>
								</view>
								<view class="num">
									vip222
								</view>
								<view class="scopy" @click="$p.copy('vip222')">
									复制
								</view>
							</view>
							<view class="msgbox">
								<view class="user">
									<view class="p1">等级材料礼包</view>
									<view class="p2">价值:<text>188米</text></view>
								</view>
								<view class="num">
									vip333
								</view>
								<view class="scopy" @click="$p.copy('vip333')">
									复制
								</view>
							</view>
							<view class="msgbox">
								<view class="user">
									<view class="p1">材料元宝礼包</view>
									<view class="p2">价值:<text>188米</text></view>
								</view>
								<view class="num">
									vip444
								</view>
								<view class="scopy" @click="$p.copy('vip444')">
									复制
								</view>
							</view>
							<view class="msgbox">
								<view class="user">
									<view class="p1">材料元宝礼包</view>
									<view class="p2">价值:<text>188米</text></view>
								</view>
								<view class="num">
									vip555
								</view>
								<view class="scopy" @click="$p.copy('vip555')">
									复制
								</view>
							</view>
							<view class="msgbox">
								<view class="user">
									<view class="p1">材料元宝礼包</view>
									<view class="p2">价值:<text>188米</text></view>
								</view>
								<view class="num">
									vip666
								</view>
								<view class="scopy" @click="$p.copy('vip666')">
									复制
								</view>
							</view>
							<view class="msgbox">
								<view class="user">
									<view class="p1">材料生肖礼包</view>
									<view class="p2">价值:<text>288米</text></view>
								</view>
								<view class="num">
									vip777
								</view>
								<view class="scopy" @click="$p.copy('vip777')">
									复制
								</view>
							</view>
							<view class="msgbox">
								<view class="user">
									<view class="p1">材料生肖礼包</view>
									<view class="p2">价值:<text>288米</text></view>
								</view>
								<view class="num">
									vip888
								</view>
								<view class="scopy" @click="$p.copy('vip888')">
									复制
								</view>
							</view>
							<view class="msgbox">
								<view class="user">
									<view class="p1">稀有材料礼包</view>
									<view class="p2">价值:<text>288米</text></view>
								</view>
								<view class="num">
									vip999
								</view>
								<view class="scopy" @click="$p.copy('vip999')">
									复制
								</view>
							</view>





						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 1
			};
		},
		onLoad() {

		},
		methods: {
			tabchange(item) {
				this.tab = item
			}
		},
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;

		.yun {
			position: absolute;
			top: -3%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.ping1 {
			width: 100%;
			display: flex;
		}

		.box1 {
			position: relative;
			height: calc(100vh - 97px);
			overflow-y: scroll;
			background-color: #ffffff;
			padding: 10px 6px 0;
		}
	}

	.item {
		border: 4px solid #d2bdc6;
		padding: 10px 5px;
		color: #333333;
		margin-bottom: 10px;

	}

	.scrolllist {
		height: calc(100vh - 230px);
		overflow-y: scroll;
		margin-top: 5px;

		.msgbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
			background-size: 100% 100%;
			padding: 13px 16px 15px;
			box-sizing: border-box;
			margin-bottom: 5px;

			.user {
				.p1 {
					font-size: 15px;
					font-weight: normal;
					color: #333333;
					line-height: 15px;
					margin-bottom: 10px;
				}

				.p2 {
					font-size: 13px;
					font-weight: normal;
					color: #333333;
					line-height: 13px;

					text {
						color: #FF3399;
					}
				}
			}

			.num {
				width: 30%;
				font-weight: normal;
				font-size: 15px;
				color: #333333;
				line-height: 24px;
			}

			.scopy {
				width: 75px;
				height: 33px;
				display: block;
				font-size: 12px;
				text-align: center;
				font-weight: normal;
				color: #f9e5b6;
				line-height: 33px;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.ng {
			background: url(http://image.qxgm.site/tdz/img/public/mg-06.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>